<template>
    <view class="operate">
        <templat v-if="role === 'customer'">
            <view class="tips mt24">
                欢迎加入我们平台！我们致力于为您提供便捷、高效的用工服务，您可以根据需求轻松下单并快速找到合适的师傅。为了帮助您更顺利地完成订单操作，以下是详细的使用步骤，请按照流程逐步操作。</view>
            <view class="subtitle">一、授权登录</view>
            <view class="text">
                ● 在接单之前，您需要授权登录。选择我"我是客户"，进入小程序，如果您暂未登录，请前往登录页点击登录按钮，进行登录，完成登录后即可开始下单。
            </view>
            <view class="text">
                ● 我们建议您<text style="color: blue;"
                    @click="tofficial">关注我们的微信公众号</text>，这样您可以第一时间收到接单、师傅到场及完工的推送通知，方便掌握订单进度。
            </view>
            <view class="img">
                <image
                    @click="previewImg('https://www.banbanhuo.com/minio/banbanhuo/0af7a9bbf6900df205d8c15b772b44759b21ec69252d7bd9c59d773d870ff584.png')"
                    src="https://www.banbanhuo.com/minio/banbanhuo/0af7a9bbf6900df205d8c15b772b44759b21ec69252d7bd9c59d773d870ff584.png"
                    mode="widthFix" />
                <image
                    @click="previewImg('https://www.banbanhuo.com/minio/banbanhuo/f5daa35cfa0e20c816250a831022fe8da77b9a9a4f6c4930def6bdfb9f96a864.png')"
                    src="https://www.banbanhuo.com/minio/banbanhuo/f5daa35cfa0e20c816250a831022fe8da77b9a9a4f6c4930def6bdfb9f96a864.png"
                    mode="widthFix" />
            </view>

            <view class="subtitle">二、添加用工信息</view>
            <view class="text">
                ● 选择工种：根据您的需求，选择合适的工种。
            </view>
            <view class="text">
                ● 填写时间与地点：请选择服务的时间，并填写准确的地址信息。
            </view>
            <view class="text">
                ● 补充详细信息：您可以根据实际需求提供其他细节信息，确保师傅能精准到达。
            </view>
            <view class="img">
                <image
                    @click="previewImg('https://www.banbanhuo.com/minio/banbanhuo/c63b856a1f924adeebb5550a8d4373c608cafd1f04388cf7b6c29e715272cc0c.jpg')"
                    src="https://www.banbanhuo.com/minio/banbanhuo/c63b856a1f924adeebb5550a8d4373c608cafd1f04388cf7b6c29e715272cc0c.jpg"
                    mode="widthFix" />
            </view>

            <view class="subtitle">三、确认用工需求</view>
            <view class="text">
                ● 选择计费方式：您可以选择一口价或者计件计费方式，参考市场行情来出价（可查看市场行情参考图）。
            </view>
            <view class="text">
                ● 使用优惠券：如果您有优惠券，可以在此页面使用，享受折扣。
            </view>
            <view class="img">
                <image
                    @click="previewImg('https://www.banbanhuo.com/minio/banbanhuo/e5414e47020ab1bfc050d19623c0aa2f4ce7cd87c8bc24b042c85b3c24be7284.jpg')"
                    src="https://www.banbanhuo.com/minio/banbanhuo/e5414e47020ab1bfc050d19623c0aa2f4ce7cd87c8bc24b042c85b3c24be7284.jpg"
                    mode="widthFix" />
                <image
                    @click="previewImg('https://www.banbanhuo.com/minio/banbanhuo/9da5913d30c17e7bf5f799409879a162367513aeb48903e6474f6b2f019b0e64.jpg')"
                    src="https://www.banbanhuo.com/minio/banbanhuo/9da5913d30c17e7bf5f799409879a162367513aeb48903e6474f6b2f019b0e64.jpg"
                    mode="widthFix" />
            </view>

            <view class="subtitle">四、支付订单</view>
            <view class="text">
                在确认用工需求后，您将看到订单的总金额及优惠券抵扣情况。确认无误后，点击“确认支付”按钮完成支付，订单即刻创建。
            </view>
            <view class="img">
                <image
                    @click="previewImg('https://www.banbanhuo.com/minio/banbanhuo/f51eebb1ed86d284c9ddad1aa64c8dc84d050ff5652f44681162afd81d3cad59.jpg')"
                    src="https://www.banbanhuo.com/minio/banbanhuo/f51eebb1ed86d284c9ddad1aa64c8dc84d050ff5652f44681162afd81d3cad59.jpg"
                    mode="widthFix" />
            </view>

            <view class="subtitle">五、等待接单</view>
            <view class="text">
                支付完成后，您将进入等待接单状态。若等待时间过长，您可以选择加价来提高接单的机会。
            </view>
            <view class="img">
                <image
                    @click="previewImg('https://www.banbanhuo.com/minio/banbanhuo/a3e9f11677e31e1ffe4b6a6fa58e42d87656f56b25d58a0fa43b0bf934559675.jpg')"
                    src="https://www.banbanhuo.com/minio/banbanhuo/a3e9f11677e31e1ffe4b6a6fa58e42d87656f56b25d58a0fa43b0bf934559675.jpg"
                    mode="widthFix" />
            </view>

            <view class="subtitle">六、接单</view>
            <view class="text">
                师傅接单后，会及时与您联系，请保持电话畅通。<text style="text-decoration-line: underline;" @click="tofficial">如果您已关注我们的公众号，您会收到接单通知以及师傅到场提示和完工通知</text>。
            </view>
            <view class="img">
                <image
                    @click="previewImg('https://www.banbanhuo.com/minio/banbanhuo/3b655f33d99bd996e5de62dfad3076770fd20b9abace659256a10567a548a56d.jpg')"
                    src="https://www.banbanhuo.com/minio/banbanhuo/3b655f33d99bd996e5de62dfad3076770fd20b9abace659256a10567a548a56d.jpg"
                    mode="widthFix" />
            </view>

            <view class="subtitle">七、确认订单</view>
            <view class="text">
                师傅完成工作后，请及时确认订单并给师傅进行评价。这有助于我们提高服务质量，感谢您的反馈！
            </view>
            <view class="img">
                <image
                    @click="previewImg('https://www.banbanhuo.com/minio/banbanhuo/cd534679f784e5962e57139fb339e3c58e57ca8847ed818c2a42622ee8aece30.jpg')"
                    src="https://www.banbanhuo.com/minio/banbanhuo/cd534679f784e5962e57139fb339e3c58e57ca8847ed818c2a42622ee8aece30.jpg"
                    mode="widthFix" />
            </view>
            <view class="tips mt24">感谢您选择我们的服务，我们期待为您提供更多的帮助。欢迎您随时再次使用我们的平台！</view>
        </templat>
        <template v-else>
            <view class="tips mt24">
                感谢您加入我们的平台！为了确保顺利完成任务，以下是您在接单过程中需要遵循的操作步骤。
            </view>

            <view class="subtitle">一、授权登录</view>
            <view class="text">
                ● 在接单之前，您需要授权登录。选择我"我是师傅"，进入小程序，如果您暂未登录，请前往登录页点击登录按钮，进行登录。
            </view>
            <view class="img">
                <image
                    @click="previewImg('https://www.banbanhuo.com/minio/banbanhuo/47f9070b5ad0ce67b925b9dd15e547b44c7045637d3d47061b4b8880bddfb202.png')"
                    src="https://www.banbanhuo.com/minio/banbanhuo/47f9070b5ad0ce67b925b9dd15e547b44c7045637d3d47061b4b8880bddfb202.png"
                    mode="widthFix" />
                <image
                    @click="previewImg('https://www.banbanhuo.com/minio/banbanhuo/f5daa35cfa0e20c816250a831022fe8da77b9a9a4f6c4930def6bdfb9f96a864.png')"
                    src="https://www.banbanhuo.com/minio/banbanhuo/f5daa35cfa0e20c816250a831022fe8da77b9a9a4f6c4930def6bdfb9f96a864.png"
                    mode="widthFix" />
            </view>

            <view class="subtitle">二、填写基本资料</view>
            <view class="text">
                ● 在开始接单之前，您需要填写基本资料才能开始接单，如果您还未填写基本资料，请前往填写个人真实姓名以及手机号。
            </view>
            <view class="img">
                <image
                    @click="previewImg('https://www.banbanhuo.com/minio/banbanhuo/6f54f5d8a3967520b521181a559a15d62981c217b5eb91e71785c4cf359b5b0c.png')"
                    src="https://www.banbanhuo.com/minio/banbanhuo/6f54f5d8a3967520b521181a559a15d62981c217b5eb91e71785c4cf359b5b0c.png"
                    mode="widthFix" />
            </view>

            <view class="subtitle">三、接单</view>
            <view class="text">
                ● 完善基本资料，您可以浏览待接订单，选择符合您技能和时间的订单进行接单。接单后，您将收到客户的基本信息和服务要求。
            </view>
            <view class="text">
                ● 在接单后，请尽早与客户取得联系，确认服务时间、地点、具体需求等信息。与客户的沟通将有助于确保服务的顺利进行。
            </view>
            <view class="img">
                <image
                    @click="previewImg('https://www.banbanhuo.com/minio/banbanhuo/45a41ff64a36312365a3734fc118bf5694e3cccb9a6e95d5923a9d7ecb196082.jpg')"
                    src="https://www.banbanhuo.com/minio/banbanhuo/45a41ff64a36312365a3734fc118bf5694e3cccb9a6e95d5923a9d7ecb196082.jpg"
                    mode="widthFix" />
            </view>

            <view class="subtitle">四、完善身份信息</view>
            <view class="text">
                ● 平台会为接单师傅录入保险信息，如果您是首次接单并且未完善身份信息，请前往填写您的身份证号，身份证号必须是18位，且与您的身份证上的信息一致。
            </view>
            <view class="img">
                <image
                    @click="previewImg('https://www.banbanhuo.com/minio/banbanhuo/ab51280524ac489ded5b930a90e77177fa17c134cc569c3631004161abff7ab1.png')"
                    src="https://www.banbanhuo.com/minio/banbanhuo/ab51280524ac489ded5b930a90e77177fa17c134cc569c3631004161abff7ab1.png"
                    mode="widthFix" />
            </view>

            <view class="subtitle">五、到场打卡</view>
            <view class="text">
                ● 如果您已完善身份信息，到达客户指定地点后，请进行现场打卡，确保您按时到达，并通过平台打卡系统确认到场，以便记录您的工作时间和位置。
            </view>
            <view class="img">
                <image
                    @click="previewImg('https://www.banbanhuo.com/minio/banbanhuo/8d89e30c4d796f392a8683922f5bf2820ae13dccdfaed25b975c4d3f90591600.jpg')"
                    src="https://www.banbanhuo.com/minio/banbanhuo/8d89e30c4d796f392a8683922f5bf2820ae13dccdfaed25b975c4d3f90591600.jpg"
                    mode="widthFix" />
            </view>

            <view class="subtitle">六、拍照上传</view>
            <view class="text">
                ● 在完成服务过程中，您需要拍摄相关照片并上传至平台。这些照片将作为服务的记录，包括工作前后、完成情况等，以便客户确认和平台审核。
            </view>
            <view class="text">
                ● 工作完成后，请通过平台申请完工。在申请时，上传您的完工照片并提交，等待客户确认。
            </view>
            <view class="img">
                <image
                    @click="previewImg('https://www.banbanhuo.com/minio/banbanhuo/3287320cbbddd93f32e32a7c6367115c65d82a0906fed8ef5fd12c5d04079028.jpg')"
                    src="https://www.banbanhuo.com/minio/banbanhuo/3287320cbbddd93f32e32a7c6367115c65d82a0906fed8ef5fd12c5d04079028.jpg"
                    mode="widthFix" />
                <image
                    @click="previewImg('https://www.banbanhuo.com/minio/banbanhuo/8fdc88635bbc4db5cb4d983fd4a4b371a6998ec268c4b00276067c13f528f4e4.jpg')"
                    src="https://www.banbanhuo.com/minio/banbanhuo/8fdc88635bbc4db5cb4d983fd4a4b371a6998ec268c4b00276067c13f528f4e4.jpg"
                    mode="widthFix" />
            </view>

            <view class="subtitle">七、完工评价</view>
            <view class="text">
                ● 客户完成确认后，您可以查看客户的评价，您的评分对您的未来接单有重要影响，请尽力提供高质量的服务。
            </view>
            <view class="img">
                <image
                    @click="previewImg('https://www.banbanhuo.com/minio/banbanhuo/2334fa73f47356f6a0ad8be3a70df7c4a44a51617d70bfdccc43aca2a94c77d4.jpg')"
                    src="https://www.banbanhuo.com/minio/banbanhuo/2334fa73f47356f6a0ad8be3a70df7c4a44a51617d70bfdccc43aca2a94c77d4.jpg"
                    mode="widthFix" />
            </view>

            <view class="subtitle">八、收益提现</view>
            <view class="text">
                ● 客户完成确认后，您的收益将加入至您的个人钱包，请到我的钱包查看并提现。
            </view>
            <view class="text">
                ● 申请提现，请耐心等待，预计1-3个工作日到账，如有任何疑问，请及时<text style="color: blue;" @click="makePhone">联系客服</text>。
            </view>
            <view class="img">
                <image
                    @click="previewImg('https://www.banbanhuo.com/minio/banbanhuo/219fa9ceec5f47e977ae5a74c5af57a258147af39da5a39a2cd68c8330da1a59.jpg')"
                    src="https://www.banbanhuo.com/minio/banbanhuo/219fa9ceec5f47e977ae5a74c5af57a258147af39da5a39a2cd68c8330da1a59.jpg"
                    mode="widthFix" />
            </view>
            <view class="tips mt24">感谢您为平台用户提供高质量的服务！您的专业和努力是我们平台成功的关键。期待与您一起为更多客户带来满意的服务！</view>
        </template>
    </view>
</template>

<script setup lang="ts">
import config from '@/utils/config';
const role = uni.getStorageSync("role") || "customer"
// 关注公众号
const tofficial = () => {
    uni.navigateTo({
        url: '/pages/mine/official/official'
    })
}
// 跳转实名认证
const toAuth = () => {
    uni.navigateTo({
        url: '/pages/mine/authInfo/authInfo'
    })
}

const { customerServicePhone } = config;
// 联系客服
const makePhone = () => {
    uni.makePhoneCall({
        phoneNumber: customerServicePhone,
        fail:(fail)=>{}
    })
}
// 预览图片
const previewImg = (url: string) => {
    uni.previewImage({
        urls: [url]
    })
}

</script>

<style lang="scss" scoped>
.operate {
    min-height: 100vh;
    overflow: hidden;
    padding: 0 32rpx;
    box-sizing: border-box;
    padding-bottom: 32rpx;
}

.title {
    width: 100%;
    font-size: 44rpx;
    font-weight: 700;
    text-align: center;
    margin-top: 32rpx;
}

.subtitle {
    width: 100%;
    font-size: 32rpx;
    font-weight: 600;
    margin-top: 32rpx;
    margin-bottom: 12rpx;
}

.text {
    font-size: 28rpx;
    color: #222;
    line-height: 36rpx;
    text-indent: 2em;
}

.tips {
    font-size: 32rpx;
    color: #222;
    text-indent: 2em;
    font-weight: bolder;
}

.img {
    display: flex;
    margin-top: 12rpx;

    image {
        width: 250rpx;
        margin-left: 12rpx;
    }
}
</style>